<template>
  <div class="page-loadmore-bottom">
    <!-- <div
      class="loading-background"
      :style="{
        transform: 'scale3d(' + moveTranslate + ',' + moveTranslate + ',1)',
      }"
    >
      translateScale : {{ moveTranslate }}
    </div> -->
    <div
      class="loadmore-wrapper-bottom"
      ref="wrapper"
      :style="{ height: wrapperHeight + 'px' }"
    >
      <test-loadmore
        :bottom-method="loadBottom"
        @bottom-status-change="handleBottomChange"
        :bottom-all-loaded="allLoaded"
        ref="loadmore"
      >
        <slot></slot>

        <div slot="bottom" class="loadmore-bottom">
          <span
            v-show="bottomStatus !== 'loading'"
            :class="{ 'loadmore-bottom-rotate': bottomStatus === 'drop' }"
            >{{ isLoadAllText }}</span
          >
          <span v-show="bottomStatus === 'loading'">
            <snake-spinner></snake-spinner>
          </span>
        </div>
      </test-loadmore>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import TestLoadmore from '@/plugins/Loadmore/Index'
import SnakeSpinner from '@/components/spinner/snake'
export default {
  props: {
    total: {
      type: Boolean,
      default: false,
    },
    pageNo: {
      type: [String, Number],
      default: 1,
    },
    totalPage: {
      type: [String, Number],
      default: 1,
    },
  },
  components: {
    TestLoadmore,
    SnakeSpinner,
  },

  created() {},

  mounted() {
    let appMainWrapper = document.querySelector('.app-main-wrapper')
    this.wrapperHeight =
      appMainWrapper.clientHeight -
      this.$refs.wrapper.getBoundingClientRect().top
  },

  data() {
    return {
      list: [],
      allLoaded: false,
      bottomStatus: '',
      wrapperHeight: 0,
    }
  },
  computed: {
    isLoadAllText() {
      return this.allLoaded ? '加载完成' : '上拉加载'
    },
  },

  methods: {
    handleBottomChange(status) {
      this.bottomStatus = status
    },

    loadBottom() {
      setTimeout(() => {
        if (this.pageNo * 1 !== this.totalPage) {
          this.$emit('loadData')
          this.$refs.loadmore.onBottomLoaded()
        } else {
          this.allLoaded = true
        }
        // if (this.pageNo === this.totalPage) return (this.allLoaded = true);
      }, 1500)
    },
  },
}
</script>

<style lang="less" scoped>
.page-loadmore-bottom {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

.loadmore-wrapper-bottom {
  height: 100%;
  margin-top: -1px;
  overflow: scroll;
  // background-color: #00ffff;
}

.loading-background {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  transition: 0.2s linear;
}

.loadmore-listitem {
  height: 50px;
  line-height: 50px;
  border-bottom: solid 1px #eee;
  text-align: center;
  &:first-child {
    border-top: solid 1px #eee;
  }
}

.loadmore-bottom {
  display: flex;
  justify-content: center;
  span {
    width: 100%;
    height: 100px;
    display: block;
    transition: 0.2s linear;
    vertical-align: middle;
    text-align: center;
  }
  & > span:first-child {
    // height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    // background-color: #ff0000;
  }
  & > span:nth-child(2) {
    display: flex;
    justify-content: center;
    align-items: center;
    // background-color: #00ffff;
  }
}

.loadmore-bottom-rotate {
  transform: rotate(180deg);
}
</style>
